<template>
  <div :style="playerStyle" @click="onPlay">
    <audio ref="audio" >
      <source :src="'/api/'+value" type="audio/wav">
    </audio>
    <span class="audio-time" v-if="source=='me'"
      >{{ Math.round(time * 100) / 100 }}″</span
    >
    <i
      :class="'iconfont audio-icon icon-audio-'+source "
      
    />
    <span class="audio-time" v-if="source=='else'"
      >{{ Math.round(time * 100) / 100 }}″</span
    >
  </div>
</template>

<script>
export default {
  props: {
    value: { type: String, required: true },
    time: { type: Number, required: true },
    source:{type:String,default:'else'}
  },
  computed:{
    playerStyle(){
      return this.source=='me' ? {
        maxWidth:'200px',
        cursor: "pointer",
        width:this.time*20+'px',
        minWidth:'50px',
        textAlign:'right'
      } : {
        maxWidth:'200px',
        cursor: "pointer",
        width:this.time*20+'px',
        minWidth:'50px',
        textAlign:'left'
      }
    }
  },
  methods: {
    onPlay() {
      try {
        this.$refs.audio.play();
      } catch (e) {
        this.$msg(e);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.audio-time {
  margin-right: 10px;
}
.audio-icon {
  font-size: 16px;
}
</style>
